<template>
    <my-form v-model="form" @submit="submit" @cancle="cancle" ref="form" labelWidth='150px'  >
        <el-row>
			<el-col :span="12">
                <el-form-item label="合作单位名称" prop="dwinfo.dwname" :rules="newRule('合作单位名称', 'required')">
                    <el-input v-model="form.dwinfo.dwname" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="单位类型" prop="dwinfo.dwname" :rules="newRule('单位类型', 'required')">
                    <my-select :data="registertypeList" :props="{label:'value',value:'key'}" v-model="form.dwinfo.registertype" placeholder="请选择单位类型"></my-select>
                </el-form-item>
			</el-col>

			<el-col :span="12">
                <el-form-item label="统一社会信用代码" prop="dwinfo.creditcode" 
                :rules="[{required: true, message: '请输入统一社会信用代码', trigger: ['blur','change']},{ validator: this.CheckSocialCreditCode, trigger:['blur','change']}]">
                    <el-input v-model="form.dwinfo.creditcode" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="地区权限" prop="dwinfo.xzqycode" :rules="newRule('地区权限', 'required')" >
                    <city-cascader 
                        style="width:100%"
                        v-model="form.dwinfo.xzqycode"  
                        :cityname.sync="form.dwinfo.xzqyname"
                        :change-on-select="false" 
                        clearable 
                        city-only 
                        placeholder="请选择地区">
                    </city-cascader>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="负责人" prop="dwinfo.fzrname" :rules="newRule('负责人', 'required')">
                    <el-input v-model="form.dwinfo.fzrname" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="基本账户" prop="dwinfo.jbzhzh" :rules="newRule('基本账户', 'required')">
                    <el-input v-model="form.dwinfo.jbzhzh" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="开票电话" prop="dwinfo.phone" :rules="newRule('联系电话', 'required')">
                    <el-input v-model="form.dwinfo.phone" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="开票地址" prop="dwinfo.address" :rules="newRule('开票地址', 'required')">
                    <el-input v-model="form.dwinfo.address" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="开户银行名称" prop="dwinfo.khbank" :rules="newRule('开户银行名称', 'required')">
                    <el-input v-model="form.dwinfo.khbank" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="开户行行号" prop="dwinfo.banknumber" :rules="newRule('开户行行号', 'required')">
                    <el-input v-model="form.dwinfo.banknumber" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="保函推广链接" prop="dwinfo.weburl" :rules="newRule('保函推广链接', 'required')">
                    <el-input v-model="form.dwinfo.weburl" clearable></el-input>
                </el-form-item>
			</el-col>
 

            <el-col :span="24">
                <el-form-item label="结算设置">
                    <el-radio-group v-model="rateType" >
                        <el-radio-button label="1">保函通</el-radio-button>
                        <el-radio-button label="2">惠采购</el-radio-button>
                    </el-radio-group>
                    <table class="table_area" v-show="rateType == 1">
                        <tr>
                            <th>保函类型</th>
                            <th>保函介质</th>
                            <th>出函机构</th>
                            <th>是否场内</th>
                            <th>结算方类型</th>
                            <th>结算比例</th>
                            <th>分成比例</th>
                        </tr>

                        <!-- <tr v-for="(item,index) in form.dwrateList"> -->
                        <tr v-for="(item,index) in filterStatus(form.dwrateList,1)">
                            <td style="width:10%">
                                <my-select 
                                    :data="bhlx" 
                                    :props="{label:'value',value:'key'}" 
                                    v-model="item.guaranteetype" 
                                    placeholder="保函类型">
                                </my-select>
                            </td>
                            <td style="width:10%">
                                <my-select 
                                    :data="bhjz" 
                                    :props="{label:'value',value:'key'}" 
                                    v-model="item.guaranteemedia"
                                    placeholder="保函介质">
                                </my-select>
                            </td>
                            <td style="width:10%">
                                <my-select 
                                    :data="chjg" 
                                    :props="{label:'value',value:'key'}" 
                                    v-model="item.agencytype"
                                    placeholder="出函机构">
                                </my-select>
                            </td>

                            <td style="width:10%">
                                <my-select 
                                    :data="isChangneiList" 
                                    :props="{label:'value',value:'key'}" 
                                    v-model="item.isChangnei"
                                    placeholder="是否场内">
                                </my-select>
                            </td>

                            <td style="width:10%">
                                <my-select
                                    :data="test" 
                                    :props="{label:'value',value:'key'}" 
                                    v-model="item.receType"
                                    placeholder="结算方类型">
                                </my-select>
                            </td>
                            <td style="width:10%" class="common_el_input">
                                <el-input v-model="item.settRate" placeholder="结算比例" clearable oninput ="value=value.replace(/[^0-9.]/g,'')">
                                    <template slot="append">%</template>
                                </el-input>
                            </td>
                            <td style="width:10%" class="common_el_input">
                                <el-input v-model="item.divideRate" placeholder="分成比例" clearable oninput ="value=value.replace(/[^0-9.]/g,'')">
                                    <template slot="append">%</template>
                                </el-input>
                            </td>
                            <td style="width:4%">
                                <div style="font-size:20px">
                                    <i class="el-icon-remove-outline" style="" @click="del(item)" v-show="filterStatus(form.dwrateList,1).length !=1"></i>
                                    <i class="el-icon-circle-plus-outline" @click="add(rateType)" v-show="index+1 == filterStatus(form.dwrateList,1).length"></i>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table class="table_area" v-show="rateType == 2">
                        <tr>
                            <th>地区</th>
                            <th>结算方类型</th>
                            <th>结算比例</th>
                            <th>分成比例</th>
                        </tr>

                        <tr v-for="(item,index) in filterStatus(form.dwrateList,2)">
                            <td style="width:200px">
                                <city-cascader 
                                    style="width:100%"
                                    v-model="item.areaCode"  
                                    :cityname.sync="item.areaName"
                                    :change-on-select="false"
                                    clearable 
                                    city-only 
                                    placeholder="请选择地区">
                                </city-cascader>
                            </td>
                            <td style="width:140px">
                                <my-select
                                    :data="test" 
                                    :props="{label:'value',value:'key'}" 
                                    v-model="item.receType"
                                    placeholder="结算方类型">
                                </my-select>
                            </td>
                            <td style="width:140px" class="common_el_input">
                                <el-input v-model="item.settRate" placeholder="结算比例" clearable oninput ="value=value.replace(/[^0-9.]/g,'')">
                                    <template slot="append">%</template>
                                </el-input>
                            </td>
                            <td style="width:140px" class="common_el_input">
                                <el-input v-model="item.divideRate" placeholder="分成比例" clearable oninput ="value=value.replace(/[^0-9.]/g,'')">
                                    <template slot="append">%</template>
                                </el-input>
                            </td>
                            <td style="">
                                <div style="font-size:20px">
                                    <i class="el-icon-remove-outline" style="" @click="del(item)" v-show="filterStatus(form.dwrateList,2).length !=1"></i>
                                    <i class="el-icon-circle-plus-outline" @click="add(rateType)" v-show="index+1 == filterStatus(form.dwrateList,2).length"></i>
                                </div>
                            </td>
                        </tr>
                    </table>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="是否启用" prop="dwinfo.shbj" :rules="newRule('', 'required')">
                    <el-radio-group v-model="form.dwinfo.shbj">
                        <el-radio :label="'1'">启用</el-radio>
                        <el-radio :label="'0'">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="是否需要发票" prop="dwinfo.needinvoice" :rules="newRule('', 'required')">
                    <el-radio-group v-model="form.dwinfo.needinvoice">
                        <el-radio :label="'1'">是</el-radio>
                        <el-radio :label="'0'">否</el-radio>
                    </el-radio-group>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="登录账号" prop="user.loginname" :rules="newRule('登录账号', 'required')">
                    <el-input v-model="form.user.loginname" clearable></el-input>
                </el-form-item>
			</el-col>
            <el-col :span="12">
                <el-form-item label="默认密码" >
                    <span>abc123</span>
                </el-form-item>
			</el-col>
            
            <el-col :span="24">
                <el-form-item label="营业执照" prop="licensefile" >
                    <upload-new @setfile="getLicensefile" :filename='form.dwinfo.licensefile'></upload-new>
                </el-form-item>
			</el-col>

            <el-col :span="24">
                <el-form-item label="合同协议" prop="contractfile" >
                    <upload-new @setfile="getContractfile" :filename='form.dwinfo.contractfile' :mubanShow='false'></upload-new>
                </el-form-item>
			</el-col>
		</el-row>

    </my-form>
</template>

<script>



export default {
    components: {},
    props: {
        dwcode: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            form:{
                dwinfo:{
                    dwname:'',
                    shbj:'1',
                    registertype:'',
                    needinvoice:'1',
                },
                user:{},
                dwrateList:[
                    {
                        guaranteetype:'',
                        guaranteemedia:'',
                        agencytype:'',
                        isChangnei:'',
                        receType:this.getGetters('user').registertype,
                        settRate:'',
                        divideRate:'',
                        rateType:'1',
                        areaCode:'',
                        areaName:'',
                    },
                    {
                        guaranteetype:'',
                        guaranteemedia:'',
                        agencytype:'',
                        isChangnei:'',
                        receType:this.getGetters('user').registertype,
                        settRate:'',
                        divideRate:'',
                        rateType:'2',
                        areaCode:'',
                        areaName:'',
                    },
                ]
			},
            bhlx:[],
            bhjz:[],
            chjg:[],
            isChangneiList:[
                {key:'0',value:'否'},
                {key:'1',value:'是'},
            ],

            test:[
                {key:'0',value:'无'},
                {key:'1',value:'平台'},
                {key:'2',value:'合作方'},
                {key:'3',value:'出函机构'},
            ],
            registertypeList:[
                // {key:'2',value:'合作方'},
                // {key:'3',value:'担保公司'},
            ],
            userShow:true,
            typenumber:this.getQuery('token') ? this.getQuery('registertype') : this.getGetters('user').registertype,
            rateType:'1',
            bhtClick:false,
            hcgClick:false,
        }
    },
    computed: {

    },  
    watch:{
        'form.dwrateList':{
            handler:function(n,o){
                for(let i= 0 ;i< n.length;i++){
                    if(n[i].settRate > 100){
                        this.form.dwrateList[i].settRate = 100;
                        ShowMsg('分成比例最大值为100','warning');
                    }
                    if(n[i].divideRate > 100){
                        this.form.dwrateList[i].divideRate = 100;
                        ShowMsg('分成比例最大值为100','warning');
                    }
                }
            },
           deep: true
        },
        rateType:function(n,o){
            // if(n != o && !this.dwcode){
            //     this.form.dwrateList = [
            //         {
            //             guaranteetype:'',
            //             guaranteemedia:'',
            //             agencytype:'',
            //             isChangnei:'',
            //             receType:this.getGetters('user').registertype,
            //             settRate:'',
            //             divideRate:'',
            //             rateType:n
            //         }
            //     ]
            // }
        }
    },
	methods:{
        //获取详情
		queryData: function(){
            if(this.dwcode){
                this.userShow = false;
                this.form.dwinfo.dwcode = this.dwcode;
                this.$get(this.$store.getters.partnerUrl + '/partner/'+this.form.dwinfo.dwcode, {}, function(data) {
                    this.form.dwinfo = data.dwinfo;
                    if(data.dwrateList.length != 0){
                        this.rateType = data.dwrateList[0].rateType;
                        this.form.dwrateList = data.dwrateList;
                        if(this.filterStatus(data.dwrateList,1).length == 0){
                            this.add(1);
                        }
                        if(this.filterStatus(data.dwrateList,2).length == 0){
                            this.add(2);
                        }
                    }
                    if(data.user){
                        this.form.user = data.user;
                    }
                })
            }else{
                this.getDefaultSet();
            }
		},
        getDefaultSet:function(){
            this.$get(this.$store.getters.partnerUrl + '/partner/getBaseDwrate', {}, function(data) {
                this.rateType = data[0].rateType;
                let bhtjsList = this.filterStatus(data,1);
                let hcgjsList = this.filterStatus(data,2);
                if(bhtjsList.length == 0 ){
                    this.form.dwrateList = data;
                    this.add(1);
                }else if (hcgjsList.length == 0){
                    this.form.dwrateList = data;
                    this.add(2);
                }else{
                    this.form.dwrateList = data;
                }

            })
        },
        //提交
		submit: function(){
            var that = this;
            let bhtjsList = that.filterStatus(that.form.dwrateList,1);
            let hcgjsList = that.filterStatus(that.form.dwrateList,2);
            if(bhtjsList.length == 1 && !bhtjsList[0].settRate && !bhtjsList[0].divideRate){
                this.form.dwrateList = hcgjsList;
            } else if (hcgjsList.length == 1 && !hcgjsList[0].settRate && !hcgjsList[0].divideRate){
                this.form.dwrateList = bhtjsList;
            }
            if(that.form.dwinfo.licensefile && that.form.dwinfo.contractfile){
                that.$ajax({
                    url:"/bhtong/partnermg/partner",
                    type:"post",
                    data:that.form,
                    callback:function(data,res){
                        that.cancle();
                        if(res.code == 'v'){
                            ShowMsg('提交成功','success');
                        }
                    },
                    fztype:true
                })
            }else{
                ShowMsg('您有未上传的文件','warning');
            }

		},
		cancle: function(){
			this.$emit('close');
		},
        //添加
        add:function(val){
            var obj = {
                guaranteetype:'',
                guaranteemedia:'',
                agencytype:'',
                isChangnei:'',
                receType:this.getGetters('user').registertype,
                settRate:'',
                divideRate:'',
                rateType:val,
                areaCode:'',
                areaName:'',
            }
            this.form.dwrateList.push(obj);
        },
        //删除
        del:function(item){
            for(let i=0; i<this.form.dwrateList.length; i++){
                if(JSON.stringify(item) === JSON.stringify(this.form.dwrateList[i])){
                    return this.form.dwrateList.splice(i,1);
                }
            }
        },
        //获取字典数据
        getZD:function(){
            new Chain().link(function (that, next) {
                that.$get(`${that.getGetters('comUrl')}/dict/bhlx`, data => {
                    that.bhlx =data;
                    next();
                    });
                }).link(function (that, next) {
                    that.$get(`${that.getGetters('comUrl')}/dict/bhjz`, data => {
                        that.bhjz =data;
                        next();
                    });
                }).link(function (that, next) {
                    that.$get(`${that.getGetters('comUrl')}/dict/chjg`, data => {
                        that.chjg =data;
                        next();
                    });
                }).run(this);
        },
        getLicensefile:function(val){
            this.form.dwinfo.licensefile = val;
           
        },
        getContractfile:function(val){
            this.form.dwinfo.contractfile =val;
        },
        getTypeList:function(){
            if(this.typenumber ==1){
                this.registertypeList = [
                    {key:'2',value:'合作方'},
                    {key:'3',value:'出函机构'},
                ]
            }else if(this.typenumber ==2){
                this.registertypeList = [
                    {key:'2',value:'分销商'},
                ]
            }
            this.form.dwinfo.registertype = this.registertypeList[0].key
        },
        //社会统一信用代码校验
        CheckSocialCreditCode: function (rule, value, callback) {
            if (!(/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g.test(value))) {
                callback(new Error('统一社会信用代码格式错误'));
            } else {
                callback()
            }
        },
        //获取地址栏
        getLocationBar:function(){
            if(this.getGetters('user').parentcode == 1){
                this.form.dwinfo.weburl = this.getQuery('token') ? this.getQuery('weburl') : this.getGetters('user').weburl
            }
        },
         //过滤数组
        filterStatus:function(arr,val){
            let newarr =  arr.filter(function(item){
                return item.rateType == val ;
            })
            return newarr
        },
        
	},
	mounted:function(){
        this.getTypeList();
        this.getZD();
        this.queryData();
        this.getLocationBar();
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
::v-deep .el-input-group__append{
        padding: 0 10px;
    }
    .common_el_input{
       ::v-deep .el-input__inner{
        padding-right: 10px;
        }
    }
    .table_area{
        width: 100%;
        th{
            font-weight: normal;
            color: #606266;
        }
    }
</style>
